<template>
  <el-container style="min-height: 500px; border: 1px solid #eee">
    <el-aside width="180" class="groups-aside">
      <div style="padding-left: 20px" class="common-title">分类</div>
      <div style="margin-top: 10px">
        <div
          v-for="item in groupList"
          :key="item.id"
          class="group-item"
          :class="{ 'is-active': activeGroup && activeGroup.id === item.id }"
          @click="handleGroupSelect(item)"
        >
          <span>{{ item.name }}</span>
          <span class="edit-btn">
            <i class="el-icon-edit " @click.stop="handleGroupEdit(item)" />
            <i class="el-icon-delete " @click.stop="handleGroupDelete(item)" />
          </span>
        </div>
        <div class="group-item-new"><el-button type="text" class="addNewBtn" @click="handleGroupAdd">添加新的分类</el-button></div>
      </div>
    </el-aside>

    <el-container class="perm-container">
      <el-header style="height: auto">
        <div class="common-title">
          <div>
            <span v-if="activeGroup !== null">{{ activeGroup.name }} - 【{{ activeGroup.classifyCode }}】</span>
          </div>
          <el-button type="primary" icon="add" class="addBtn" @click="handleTplAdd">添加模板</el-button>
        </div>
      </el-header>
      <el-main style="padding-top: 20px">
        <el-table :data="list" border>
          <el-table-column prop="name" align="center" label="名称" />
          <el-table-column prop="code" align="center" label="编码" />
          <el-table-column prop="versionId" align="center" label="最新版本">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.versionId === 0" :closable="false" type="danger">无</el-tag>
              <div v-else>
                <el-tag :closable="false" type="success">{{ scope.row.versionDetail.versionNum }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="200" prop="versionId" align="center" label="版本说明">
            <template slot-scope="scope">
              <div v-if="scope.row.versionId === 0">-</div>
              <div v-else class="template-remark">{{ scope.row.versionDetail.updateMsg }}</div>
            </template>
          </el-table-column>

          <!-- <el-table-column width="120" prop="autoUpdate" align="center" label="自动更新">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.autoUpdate" :closable="false" type="success" t>开启</el-tag>
              <el-tag v-else :closable="false" type="danger">关闭</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column prop="description" align="center" label="说明" />
          <el-table-column align="center" label="操作" width="350">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="handleTplEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="success" @click="handleVersion(scope.row)">版本</el-button>
              <el-button size="small" type="warning" @click="handleRelease(scope.row)">发布</el-button>
              <el-button size="small" type="danger" @click="handleTplDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px " class="pagination-container">
          <el-pagination :current-page.sync="pageNum" :page-size="pageSize" :total="total" layout="total, prev, pager, next" @current-change="handleCurrentChange" />
        </div>
      </el-main>
      <group-form-dialog ref="groupFormDialog" :scope="scope" />
      <form-dialog ref="apiFormDialog" :scope="scope" />
      <select-version-dialog ref="selectVersionDialog" />
    </el-container>
  </el-container>
</template>

<script>
import FormDialog from './FormDialog'
import GroupFormDialog from './GroupFormDialog'
import SelectVersionDialog from '../components/SelectVersionDialog'
import { getClassifyList, deleteClassify, deleteClassifyTpl, updateClassifyTpl, getClassifyTplList } from '@/api/wxappClassify'

export default {
  name: 'PermissionMange',
  components: {
    SelectVersionDialog,
    GroupFormDialog,
    FormDialog
  },
  props: {
    scope: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      activeGroup: null,
      pageSize: 10,
      pageNum: 1,
      keyword: '',
      total: 0,
      groupList: [],
      list: []
    }
  },
  computed: {},
  mounted() {
    this.fetchGroupList()
  },
  methods: {
    fetchGroupList() {
      return getClassifyList(this.scope).then(res => {
        if (res.code === 0) {
          this.groupList = res.data
          this.$nextTick(() => {
            this.updateActiveGroup()
          })
        }
      })
    },
    fetchTplList() {
      if (this.activeGroup == null) {
        this.list = []
        this.total = 0
        this.pageNum = 1
        this.pageSize = 10
      } else {
        const data = {
          classifyCode: this.activeGroup.classifyCode,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
        return getClassifyTplList(data).then(res => {
          if (res.code === 0) {
            this.list = res.data.list
            this.total = res.data.total
          }
          return res
        })
      }
    },
    updateActiveGroup() {
      if (this.groupList.length > 0) {
        if (this.activeGroup == null) {
          this.activeGroup = this.groupList[0]
          this.fetchTplList()
        }
      } else {
        this.activeGroup = null
      }
    },
    handleRelease(row) {
      this.$router.push({ name: 'releaseUpdate', params: { classifyTplId: row.id } })
    },
    handleVersion(row) {
      this.$refs.selectVersionDialog.show(this.activeGroup.classifyCode, row.code).then(resp => {
        row.versionId = resp.id
        updateClassifyTpl(row).then(res => {
          if (res.code === 0) {
            this.$notify({ title: '成功', message: '配置成功', type: 'success', duration: 2000 })
            this.fetchTplList()
          }
        })
      })
    },
    handleGroupSelect(group) {
      if (group.id === this.activeGroup.id) {
        this.fetchTplList()
      } else {
        this.activeGroup = group
        this.pageNum = 1
        this.total = 0
        this.fetchTplList()
      }
    },
    handleGroupAdd() {
      this.$refs.groupFormDialog.add().then(() => {
        this.fetchGroupList()
      })
    },
    handleGroupEdit(group) {
      this.$refs.groupFormDialog.edit(group).then(() => {
        this.fetchGroupList()
      })
    },
    handleGroupDelete(group) {
      this.$confirm(`此操作将删除【${group.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteClassify({ id: group.id }).then(res => {
          if (res.code === 0) {
            this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 2000 })
            if (group.id === this.activeGroup.id) {
              this.activeGroup = null
            }
            this.fetchGroupList()
          }
        })
      })
    },

    handleTplAdd() {
      if (!this.groupList || this.groupList.length === 0) {
        this.$notify({ title: '提示', message: '请先添加分组', type: 'warn', duration: 2000 })
        return
      }
      this.$refs.apiFormDialog.add(this.activeGroup.classifyCode).then(() => {
        this.fetchTplList()
      })
    },

    handleTplEdit(item) {
      this.$refs.apiFormDialog.edit(item.id).then(() => {
        this.fetchTplList()
      })
    },
    handleTplDelete(tpl) {
      console.log('删除模板--', tpl)
      this.$confirm(`此操作将删除模板【${tpl.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id, name, classifyCode } = tpl
        const tplDate = { id, name, classifyCode }
        deleteClassifyTpl(tplDate).then(res => {
          if (res.code === 0) {
            this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 2000 })
            this.fetchTplList()
          }
        })
      })
    },
    handleCurrentChange() {
      this.fetchTplList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.common-title {
	height: 60px;
	font-size: 16px;
	font-weight: bold;
	color: #666;
	border-bottom: 1px solid #e7e7e7;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.addBtn {
		background-color: $btnBgc;
		border: none;
	}
	.addBtn:hover {
		opacity: 0.5;
	}
}

.groups-aside {
	background-color: #fff;
	margin-right: 14px;
	width: 180px;
}

.perm-container {
	background-color: #ffffff;
}

.search-container {
	margin-top: 10px;
}

.search-wrap {
	width: 200px;
	margin-right: 30px;
}

.group-item {
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	color: #303133;
	padding: 0 20px;
	list-style: none;
	cursor: pointer;
	position: relative;
	-webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
	transition: border-color 0.3s, background-color 0.3s, color 0.3s;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	white-space: nowrap;
	display: flex;
	justify-content: space-between;
}
.group-item:hover {
	background-color: $overBgc !important;
}

.group-item-new {
	margin-top: 5px;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	color: $btnBgc;
	padding: 0 20px;
	.addNewBtn {
		color: $btnBgc;
	}
}

.group-item.is-active {
	color: $btnBgc;
}

.group-item:hover {
	outline: 0;
	background-color: #edf3fe;
}

.group-item:hover .edit-btn {
	display: block;
}

.edit-btn {
	display: none;

	.el-icon-delete {
		margin-right: 5px;
		width: 24px;
		text-align: center;
		font-size: 18px;
		vertical-align: middle;
		color: #ed4014 !important;
	}

	.el-icon-edit {
		margin-right: 5px;
		width: 24px;
		text-align: center;
		font-size: 18px;
		vertical-align: middle;
		color: #4d82f3 !important;
	}
}
.template-remark {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.el-button--primary:hover,
.el-button--primary:focus {
	background-color: $btnBgc;
	border-color: $btnBgc;
}
</style>
